<!doctype html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Electron</title>
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" />
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script>
    function setRem() {
      const uiWidth = 1920; // PC端设计稿宽度（例如1920px）
      const maxWidth = 1920; // 最大宽度限制
      const minWidth = 1200; // 最小宽度限制

      // 获取当前窗口宽度
      let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

      // 限制宽度范围
      if (clientWidth > maxWidth) {
        clientWidth = maxWidth;
      }
      if (clientWidth < minWidth) {
        clientWidth = minWidth;
      }

      // 计算 font-size
      const html = document.getElementsByTagName('html')[0];
      html.style.fontSize = (clientWidth / uiWidth) * 100 + 'px'; // 设置font-size
    }

    // 初始化设置
    setRem();

    // 监听窗口大小变化
    window.addEventListener('resize', setRem);

  </script>
</body>

</html>